
<div id="bpmnModel"></div>
<!-- 第一个节点 -->
<div style="display:none;">
    <#list flowNodeList as flowNode>
    <input type="text" class="firstNode" value="${flowNode.nodeId}"/>
    </#list>
</div>

<link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
<link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
<link rel="stylesheet" href="${ctx}/css/public.css">
<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="${ctx}/display/displaymodel.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/display/jquery.qtip.min.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/workflowStatic/style/css/definition.node.css" />


<script src="${ctx}/display/jquery.qtip.min.js"></script>
<script src="${ctx}/display/raphael.js"></script>
<script src="${ctx}/workflowStatic/js/displaymodel.js"></script>
<script src="${ctx}/workflowStatic/js/bpmn-draw.js"></script>
<script src="${ctx}/workflowStatic/js/bpmn-icons.js"></script>
<script src="${ctx}/workflowStatic/js/Polyline.js"></script>
<script>

    var modelId = "${modelId!}";
    var parentProcDefId = "${parentProcDefId!}";
    var procDefId = "${procDefId!}";
    var deployId = "${deployId!}";
    var defKey = "${defKey!}";
    var setter=layui.setter;
    $(function () {
        showDiagram(modelId);
    });
    function showDiagram(modelId) {
        var modelUrl = '${ctx}/workflow/bpmnImage/json/getByModelId';
        $.ajax({
            url: modelUrl + '?nocaching=' + new Date().getTime()+'&modelId='+modelId,
            type: "get",
            contentType: 'application/json',
            dataType: 'json',
            success: function (data) {
                if ((!data.elements || data.elements.length == 0) && (!data.pools || data.pools.length == 0)) return;

                INITIAL_CANVAS_WIDTH = data.diagramWidth;
                INITIAL_CANVAS_WIDTH += 30;

                INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50;
                canvasWidth = INITIAL_CANVAS_WIDTH;
                canvasHeight = INITIAL_CANVAS_HEIGHT;
                viewBoxWidth = INITIAL_CANVAS_WIDTH;
                viewBoxHeight = INITIAL_CANVAS_HEIGHT;

                $('#bpmnModel').width(INITIAL_CANVAS_WIDTH);
                $('#bpmnModel').height(INITIAL_CANVAS_HEIGHT);
                <!--创建画布-->
                paper = Raphael(document.getElementById('bpmnModel'), canvasWidth, canvasHeight);
                paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
                paper.renderfix();

                if (data.pools)
                {
                    for (var i = 0; i < data.pools.length; i++)
                    {
                        var pool = data.pools[i];
                        _drawPool(pool);
                    }
                }

                var modelElements = data.elements;
                for (var i = 0; i < modelElements.length; i++)
                {
                    var element = modelElements[i];
                    var drawFunction = eval("_draw" + element.type);
                    drawFunction(element);
                    _showTip($("#"+element.id),element);

                }

                if (data.flows)
                {
                    for (var i = 0; i < data.flows.length; i++)
                    {
                        var flow = data.flows[i];
                        if (flow.type === 'sequenceFlow') {
                            _drawFlow(flow);
                        } else if (flow.type === 'association') {
                            _drawAssociation(flow);
                        }
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
            }
        });
    }


    function isFirstNode(id){
        var isFirst = false;
        $("input.firstNode").each(function(){
            var nodeId = $(this).val();
            if(id==nodeId){
                isFirst = true;
            }
        });
        return isFirst;
    }


    function getItems(id,type,properties) {
        var items=[];
        var propStr = JSON.stringify(properties);
        switch(type){
            case "StartEvent":
                items= [
                    {id:'flowEvent', text: '事件设置'},
                    {id:"triggerNewFlow",text:"触发新流程设置"}
                ];
                break;
            case "EndEvent":
                items= [
                    {id:'flowEvent', text: '事件设置'},
                    {id:"triggerNewFlow",text:"触发新流程设置"}
                ];
                break;
            case "ParallelGateway":
                items= [];
                break;
            case "InclusiveGateway":
            case "ExclusiveGateway":
                items= [{id:'flowCondition', text: '设置分支条件' }];
                break;
            case "MultiUserTask":
                items= [
                    {id:'signExecuteEvent', text: '会签执行事件设置' },
                    {id:'flowRule', text: '跳转规则设置' },
                    {id:'flowVote', text: '会签投票规则设置' },
                    {id:'flowEvent', text: '事件设置' },
                    {id:'flowDue', text: '任务催办设置' },
                    /*{id:'flowOrgUser', text: '人员选择器设置' },*/
                    {id:'informType',text:'通知方式'}];
                break;
            case "UserTask":
                if(isFirstNode(id)){
                    items= [
                        {id:'flowRule', text: '跳转规则设置' },
                        {id:'flowEvent', text: '事件设置' },
                        {id:'flowDue', text: '任务催办设置' },
                        /*{id:'flowOrgUser', text: '人员选择器设置' },*/
                        {id:'informType',text:'通知方式'}];

                }else if(propStr.indexOf("Sequential") !== -1) {
                    items= [
                        {id:'signExecuteEvent', text: '会签执行事件设置' },
                        {id:'flowRule', text: '跳转规则设置' },
                        {id:'flowVote', text: '会签投票规则设置' },
                        {id:'flowEvent', text: '事件设置' },
                        {id:'flowDue', text: '任务催办设置' },
                        /*{id:'flowOrgUser', text: '人员选择器设置' },*/
                        {id:'informType',text:'通知方式'}];
                }else{
                    items= [
                        {id:'flowRule', text: '跳转规则设置' },
                        {id:'flowEvent', text: '事件设置' },
                        {id:'flowDue', text: '任务催办设置' },
                        {id:'flowForkJoin', text: '流程分发汇总' },
                        /*{id:'flowOrgUser', text: '人员选择器设置' },*/
                        {id:"triggerNewFlow",text:"触发新流程设置"},
                        {id:'informType',text:'通知方式'}];
                }
                break;
            case "ServiceTask":
                items= [{id:'webServiceSet',text:'WebService设置'}];
                items= [{id:'flowMessage', text: '消息参数' }];
                break;
            case "SendTask":
                items= [{id:'flowMessage', text: '消息参数' }];
                break;
            case "ScriptTask":
                items= [{id:'flowEvent', text: '设置脚本' }];
                break;
            case "CallActivity":
                items= [
                    {id: 'viewSubFlow',text: '查看调用子流程示意图'},
                    {id: 'flowSet', text: '设置子流程'}];
                break;
            case "SubProcess":
                items= [{id: 'flowEvent',text: '事件设置'}];
                break;
        }
        return items;
    }

    function _showTip(htmlNode, element)
    {
        var type=element.type,
            id=element.id,
            properties = element.properties;

        var items= getItems(id,type,properties);
        if(!items)return;
        if(items.length==0)return;
        var item,html=['<div class="edui-menu-body">'];
        while(item=items.pop()){
            if(item.id=='-'){
                html.push('<div class="edui-menuitem edui-menuseparator"><div class="edui-menuseparator-inner"></div></div>');
            }
            else{
                html.push("<div class=\"edui-menuitem edui-for-"+item.id+"\" onmouseover=\"$(this).addClass('edui-state-hover')\" onmouseout=\"$(this).removeClass('edui-state-hover')\" onclick=\"clickHandler(this.id,'"+element.type+"','"+element.id+"','"+element.name+"')\" id=\""+item.id+"\"><div class=\"edui-box edui-icon\"></div><div class=\"edui-box edui-label edui-menuitem-label\">"+item.text+"</div></div>");
            }
        }
        html.push('</div>');

        var text = element.type + " ";
        if (element.name && element.name.length > 0)
        {
            text += element.name;
        }
        else
        {
            text += element.id;
        }

        htmlNode.qtip({
            content: {
                text: html.join(''),
                title: {
                    text: text
                }
            },
            position: {
                my: 'top left',
                at: 'bottom center',
                viewport: jQuery('#bpmnModel')
            },
            hide: {
                event:'click mouseleave',
                leave: false,
                fixed:true,
                delay:300
            },
            style: {
                classes: 'ui-tooltip-kisbpm-bpmn'
            }
        });
    }
    /**
     * 设置网关跳转规则。
     * conf参数属性：
     * deployId:activiti流程定义ID
     * defId:流程定义ID
     * nodeId:流程节点ID
     * @param conf
     */
    function ForkConditionWindow(conf){
        parent.layer.open({
            type: 2,
            area: ['800px', '700px'],
            title: ['设置网关跳转规则'],
            content:serverPath.workflowPath + setter.workflowLinkPath + 'actDefModel/view/forkCondition?modelId='+conf.modelId+'&nodeId='+conf.nodeId
        });
    }

    /**
     * 设置流程事件脚本对话框。
     * conf参数属性：
     * actDefId： act流程定义ID
     * nodeId:节点ID
     * modelId:流程定义ID
     * @param conf
     */
    function FlowEventWindow(conf)
    {
        if(!conf){
            return;
        }
        var url = serverPath.workflowPath + setter.workflowLinkPath + 'bpmNodeScript/view/edit?type='+conf.type+'&procDefId='+conf.procDefId+"&nodeId="+conf.nodeId+"&modelId="+conf.modelId;
        if(conf.parentProcDefId){
            url += "&parentProcDefId="+conf.parentProcDefId;
        }
        layer.open({
            type: 2,
            area: ['800px', '450px'],
            title: ['设置流程事件脚本'],
            content:url,
            btn: ['保存','关闭'],
            btnAlign: 'c',
            yes: function(index,layero){
                //保存
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveS();
            },
            btn2: function(index, layero){
                //关闭
            },
        });
    }

    /**
     * 任务会签规则设置。
     * conf:参数如下：
     * deployId:流程定义ID
     * procDefId：act流程节点Id
     * nodeId：流程节点Id
     * dialogWidth：窗口宽度，默认值500
     * dialogWidth：窗口宽度，默认值300
     * @param conf
     */

    function FlowRuleWindow(conf) {
        var url = serverPath.workflowPath + setter.workflowLinkPath + "bpmNodeRule/view/edit?deployId=" + conf.deployId + "&procDefId=" +
            conf.procDefId + "&nodeId=" + conf.nodeId + "&nodeName=" + encodeURIComponent(conf.nodeName);
        if(conf.parentProcDefId){
            url += "&parentProcDefId=" + conf.parentProcDefId;
        }

        layer.open({
            type: 1,
            area: ['1000px', '560px'],
            title: ['流程跳转规则'],
            content:'',
            success: function($dom, index) {
                $("#layui-layer" + index + " .layui-layer-content").append("<div ></div>");
                $("#layui-layer" + index + " .layui-layer-content div").load(url, function() {
                })
            }
        });
    }

    function FlowMessageWindow(conf) {
        var url = serverPath.workflowPath + setter.workflowLinkPath + "bpmNodeMessage/view/edit?procDefId=" + conf.procDefId + "&nodeId=" + conf.nodeId;
        parent.layer.open({
            type: 2,
            area: ['900px', '700px'],
            title: ['消息参数设置'],
            content: url
        });
    }

    /**
     * 通知方式设置脚本对话框。
     * conf参数属性：
     * actDefId： act流程定义ID
     * nodeId:节点ID
     * modelId:流程定义ID
     * @param conf
     */
    function InfromTypeWindow(conf){
        layer.open({
            type: 2,
            // area: ['100%', '100%'],
            area: ['400px', '250px'],
            title: ['通知方式设置'],
            content:serverPath.workflowPath + setter.workflowLinkPath +'actDefModel/view/informType?modelId='+conf.modelId+'&procDefId='+conf.procDefId+'&nodeId='+conf.nodeId+'&parentActDefId='+conf.parentActDefId
        });
    }

    function TriggerNewFlowWindow(conf) {
        layer.open({
            type: 2,
            area: ['900px', '550px'],
            title: ['流程关联触发配置'],
            content: serverPath.workflowPath + setter.workflowLinkPath +"bpmNewFlowTrigger/view/edit?flowKey=" + conf.defKey + "&nodeId=" + conf.nodeId + "&procDefId=" + conf.procDefId,
            resize: true
        });
    }

    /**
     FlowOrgUserScopeWindow * 流程节点中部门人员选择器的设置窗口。
     * conf:参数如下：
     * procDefId：流程定义ID
     * nodeId：流程节点ID
     * parentActDefId：父流程定义ID
     * @param conf
     */

    function FlowOrgUserScopeWindow(conf)
    {
        layer.open({
            type: 2,
            area: ['600px', '400px'],
            title: ['部门或人员选择器配置'],
            content:serverPath.workflowPath + setter.workflowLinkPath +'bpmNodeSet/flowScope?procDefId='+conf.procDefId+'&nodeId='+conf.nodeId+'&parentActDefId='+conf.parentActDefId
        });
    }
    /**
     FlowVoteWindow * 流程节点中会签投票规则设置窗口。
     * conf:参数如下：
     * procDefId：流程定义ID
     * nodeId：流程节点ID
     * parentActDefId：父流程定义ID
     * @param conf
     */

    function FlowVoteWindow(conf)
    {
        parent.layer.open({
            type: 2,
            area: ['1070px', '757px'],
            title: ['会签投票规则设置'],
            content:serverPath.workflowPath + setter.workflowLinkPath +'bpmNodeSign/view/edit?procDefId='+conf.procDefId+'&nodeId='+conf.nodeId
            ,btn : [ "保存", "关闭" ],
            yes:function (index,layero) {
                //获取iframe的body元素
                var body = parent.layer.getChildFrame('body',index);
                //得到iframe页的窗口对象
                var iframeWin = parent.window[layero.find('iframe')[0]['name']];
                var functionalPrivilegeData = body.find("#functionalPrivilege").serializeArray();
                var data = {};
                var userType = [];
                var cmpIds = [];
                var cmpNames = [];
                var votingRulesData = body.find("#votingRules").serializeArray();
                votingRulesData = votingRulesData.concat(functionalPrivilegeData);
                $.each(votingRulesData, function() {
                    if (this.name=='userType') {
                        userType.push(this.value);
                        data[this.name] = userType;
                    }else if (this.name=='cmpIds'){
                        cmpIds.push(this.value);
                        data[this.name] = cmpIds;
                    }else if (this.name=='cmpNames'){
                        cmpNames.push(this.value);
                        data[this.name] = cmpNames;
                    }else {
                        data[this.name] = this.value;
                    }

                });
                $.ajax({
                    type: 'POST',
                    url: "${ctx}/workflow/bpmNodeSign/save",
                    traditional: true,
                    data:data,
                    success: function (res) {
                        if (res.code==0){
                            parent.layer.close(index);
                            parent.layer.msg(res.msg, {icon: 1, time: 1000});
                        }else {
                            parent.layer.msg(res.msg, {icon: 1, time: 1000});
                        }

                    },
                    dataType: 'json'});
            }
        });
    }
    /**
     * 流程任务分发汇总配置
     * conf参数属性:    *  procDefId: 流程定义ID *  nodeId: 流程节点ID
     * @param conf
     */
    function FlowForkJoinWindow(conf) {
        layer.open({
            type:2,
            area:['600px','350px'],
            title:['流程任务分发汇总配置'],
            content:serverPath.workflowPath + setter.workflowLinkPath +'bpmNodeSet/view/flowForkJoin?procDefId='+conf.procDefId+'&nodeId='+conf.nodeId
        })
    }

    /**
     * 查看调用子流程示意图
     * @param conf
     * @constructor
     */
    function ViewSubFlowWindow(conf) {
        $.ajax({
            type:"post",
            data:{procDefId:conf.procDefId, nodeId: conf.nodeId},
            dataType:"json",
            url: "${ctx}/workflow/bpmNodeSet/getCallActivityModel",
            success: function (result) {
                if (result.code == 0) {
                    var model = result.data;
                    layer.open({
                        type: 2,
                        title: "流程图",
                        area: ['50%', '60%'],
                        btn:['关闭'],
                        skin: 'btn-close',
                        content: serverPath.workflowPath + setter.workflowLinkPath + 'bpmnImage/view/diagram?modelId=' + model.id
                    });
                }else{
                    parent.layer.msg(result.msg, {icon: 1, time: 1000});
                }
            }
        });
    }

    /**
     * 设置子流程
     * @param conf
     * @constructor
     */
    function FlowSetWindow(conf) {
        $.ajax({
            type:"post",
            data:{procDefId:conf.procDefId, nodeId: conf.nodeId},
            dataType:"json",
            url: "${ctx}/workflow/bpmNodeSet/getCallActivityModel",
            success: function (result) {
                if (result.code == 0) {
                    var model = result.data;
                    window.open("${ctx}/workflow/actDefModel/view/commonSetting?modelId=" + model.id + "&parentProcDefId=" + conf.procDefId);
                }else{
                    parent.layer.msg(result.msg, {icon: 1, time: 1000});
                }
            }
        });
        var url = "${ctx}/workflow/actDefModel/view/commonSetting?modelId=" + conf.modelId;
        window.location.href = url;
    }

    //任务催办设置
    function FlowReminderWindow(conf) {
        var url = serverPath.workflowPath + setter.workflowLinkPath + "taskReminder/view/add?procDefId=" + conf.procDefId + "&nodeId=" +
            conf.nodeId;
        if(conf.parentProcDefId){
            url += "&parentProcDefId=" + conf.parentProcDefId;
        }

        layer.open({
            type: 2,
            area: ['1050px', '560px'],
            title: ['任务催办设置'],
            content: url,
            skin: 'btn-class reminderBtn',
            btn: ['保存','关闭','增加'],
            btnAlign: 'c',
            yes: function(index,layero){
                //保存
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.save();
            },
            btn2: function(index, layero){
                //关闭
            },
            btn3: function(index, layero){
                //增加
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.addNew();
                return false;
            }
        });
    }

    function clickHandler(itemId,type,nodeId, nodeName){
        if(itemId=="flowCondition"){
            ForkConditionWindow({modelId:modelId,deployId:null,nodeId:nodeId,parentProcDefId:parentProcDefId});
        }else if(itemId=="flowEvent"){
            FlowEventWindow({type:type,procDefId:procDefId,nodeId:nodeId,modelId:modelId,parentProcDefId:parentProcDefId});
        }else if (itemId == "flowRule") {
            FlowRuleWindow({deployId:deployId,procDefId:procDefId,nodeId:nodeId,nodeName:nodeName,parentProcDefId: parentProcDefId});
        } else if(itemId=="informType") {
            InfromTypeWindow({modelId:modelId,deployId:null,procDefId:procDefId,nodeId:nodeId,parentActDefId:parentProcDefId});
        } else if (itemId == "triggerNewFlow") {
            TriggerNewFlowWindow({nodeId: nodeId, procDefId: procDefId, defKey: defKey});
        }else if (itemId == "flowMessage") {
            FlowMessageWindow({procDefId:procDefId,nodeId:nodeId});
        }else if (itemId == "flowOrgUser") {
            FlowOrgUserScopeWindow({nodeId:nodeId,procDefId:procDefId,parentProcDefId:parentProcDefId});
        }else if (itemId == "flowVote") {
            FlowVoteWindow({nodeId:nodeId,procDefId:procDefId});
        }else if (itemId == "flowForkJoin") {
            FlowForkJoinWindow({nodeId:nodeId,procDefId:procDefId});
        }else if (itemId == "viewSubFlow"){
            ViewSubFlowWindow({nodeId:nodeId,procDefId:procDefId,modelId: modelId});
        }else if (itemId == "flowSet"){
            FlowSetWindow({nodeId:nodeId,procDefId:procDefId, modelId:modelId});
        }else if (itemId == "flowDue") {
            FlowReminderWindow({procDefId:procDefId,nodeId:nodeId,parentProcDefId:parentProcDefId});
        }
    }

</script>
